<template>
  <van-nav-bar
    :title="info.name"
    left-text="返回"
    left-arrow
    fixed
    @click-left="onBack"
  />

  <div class="h50"></div>
  <div class="clear"></div>
  <div class="aui-m-slider">
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="(image, index) in info.thumbs_cdn" :key="index">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <div class="clear"></div>
  <div class="detailbox">
    <h4>{{ info.name }}</h4>
    <div class="price">
      <em>￥</em>{{ info.price }}<span>库存：{{ info.stock }}件</span>
    </div>
  </div>
  <div class="clear"></div>
  <div class="allkbox"></div>
  <div class="clear"></div>
  <div class="detailbox_2" style="height: 50vh;" v-html="info.content"></div>

  <van-action-bar>
    <van-action-bar-icon
      icon="cart-o"
      text="购物车"
      @click="
        () => {
          proxy.$router.push({
            path: '/product/cart/index',
            query: { action: 'cart' },
          });
        }
      "
    />
    <van-action-bar-icon
      :icon="info.collection_status === true ? 'star' : 'star-o'"
      :text="info.collection_status === true ? '已收藏' : '收藏'"
      :color="info.collection_status === true ? '#ff5000' : ''"
      @click="onCollection"
    />
    <van-action-bar-button
      type="warning"
      text="加入购物车"
      @click="onCartAdd"
    />
    <van-action-bar-button type="danger" text="立即购买" @click="onBuy" />
  </van-action-bar>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, reactive } from "vue";

const { proxy } = getCurrentInstance();
const info = ref({});
const id = ref(proxy.$route.query.id ?? 0);
const business = reactive(proxy.$cookies.get("business") ?? {});

onMounted(() => {
  getProductInfo();
});

const onCartAdd = async () => {
  if (!business || JSON.stringify(business) === "{}") {
    proxy.$showNotify({
      type: "warning",
      message: "请先登录",
      duration: 2000,
    });

    return;
  }

  let data = {
    busid: business.id,
    proid: id.value,
  };

  let result = await proxy.$Api.cartAdd(data);

  if (result && result.code === 1) {
    proxy
      .$showConfirmDialog({
        title: result.msg,
        message: "是否需要跳转购物车进行结算？",
      })
      .then(() => {
        proxy.$router.push({
          path: "/product/cart/index",
          query: { action: "cart" },
        });
      })
      .catch(() => {});
  } else {
    proxy.$showNotify({
      type: "warning",
      message: result.msg,
      duration: 2000,
    });

    return;
  }
};

const onBuy = async () => {
  if (!business || JSON.stringify(business) === "{}") {
    proxy.$showNotify({
      type: "warning",
      message: "请先登录",
      duration: 2000,
    });
    return;
  }

  let data = {
    busid: business.id,
    proid: id.value,
  };

  let result = await proxy.$Api.cartAdd(data);

  if (result && result.code === 1) {
    proxy.$router.push({
      path: "/product/cart/index"
    });
  } else {
    proxy.$showNotify({
      type: "warning",
      message: '跳转失败，请先添加购物车',
      duration: 2000,
    });

    return;
  }
};

const onCollection = async () => {
  if (!business || JSON.stringify(business) === "{}") {
    proxy.$showNotify({
      type: "warning",
      message: "请先登录",
      duration: 2000,
    });

    return;
  }

  let result = await proxy.$Api.productCollection({
    id: id.value,
    busid: business.id,
  });

  if (result && result.code === 1) {
    info.value.collection_status = !info.value.collection_status;
  } else {
    proxy.$showNotify({
      type: "warning",
      message: result.msg,
      duration: 2000,
    });

    return;
  }
};

const getProductInfo = async () => {
  let data = {
    id: id.value,
    busid: business.id,
  };

  let result = await proxy.$Api.productInfo(data);

  if (result && result.code === 0) {
    proxy.$showNotify({
      type: "warning",
      message: result.msg,
      duration: 2000,
      onClose: () => {
        proxy.$router.back();
      },
    });

    return;
  }

  info.value = result.data;
};

const onBack = () => {
  proxy.$router.back();
};
</script>
